import React, { useRef } from "react";
import {
  HeaderCom,
  ButtonStyle,
  TomaoToButtonStyle,
} from "./style/headInputStyle";

export default function HeaderInput(props) {
  const inp = useRef(null);

  const add = () => {
    console.log("子组件headerinput:", props);
    const obj = { id: +new Date(), name: inp.current.value };
    props.add(obj);
    inp.current.value = "";
    inp.current.focus();
  };
  return (
    <HeaderCom>
      <input type="text" className="inp" ref={inp} />
      <ButtonStyle onClick={add}>按钮</ButtonStyle>
      <TomaoToButtonStyle>按钮2</TomaoToButtonStyle>
    </HeaderCom>
  );
}
